<template>
	<view class="page" :style="{background: `url(${imageBaseUrl}/homebj.png) no-repeat center / 100% 100vh`}" @click="handleClick">
		<view class="content">
			<view :class="['HomeBanner', animatedType ? 'on' : '']">
				<!-- #ifdef MP-WEIXIN -->
				<image src="/static/images/homebanner.png"></image>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<image src="/static/images/homebanner1.png"></image>
				<!-- #endif -->
			</view>
			<view class="HomeSearch" :class="{ on: animatedType }">
				<view class="HomeSearchInput" :class="{
          active:
            isActive &&
            (searchResults.length > 0 ||
              searchKeyword !== '' ||
              showHistory),
        }">
					<image src="/static/images/sousuoimg.png"></image>
					<input type="text" v-model="searchKeyword" @input="onSearchInput" @focus="onSearchFocus"
						@blur="onSearchBlur" placeholder="请输入要匹配的企业名称" placeholder-class="placeholderStyle" />
					<view v-if="searchKeyword !== ''" class="clear-btn" @tap.stop="clearSearch"></view>
				</view>
				<!-- 显示搜索历史或搜索结果 -->
				<view v-if="isActive && (searchResults.length > 0 || showHistory)" class="searchResults">
					<template v-if="searchKeyword === '' && showHistory">
						<view class="searchHistoryHeader">
							<text>{{ searchHistory.length===0 ? '无历史记录' : '历史记录' }}</text>
							<text class="clearHistory" @tap="clearSearchHistory">清空</text>
						</view>
						<view v-for="(history, index) in searchHistory" :key="index" @click="selectCompany(history)">
							{{ history.Name }}
						</view>
					</template>
					<template v-else>
						<view v-for="(company, index) in searchResults" :key="index" @click="selectCompany(company)">
							{{ company.Name }}
						</view>
						<view v-if="searchResults.length === 0" class="empty">
							暂无匹配的企业信息
						</view>
					</template>
				</view>
			</view>
			<view :class="['HomeFixedTitle', animatedType ? 'on' : '']">{{
      companyInfo.companyName
    }}</view>
			<view :class="['HomePiPei', animatedType ? 'on' : '']">
				<view :class="[
          'HomeAnimatedText',
          'HomeAnimatedText1',
          animatedType ? 'on' : '',
        ]">
					{{ companyInfo.personScope }}
				</view>
				<view :class="[
          'HomeAnimatedText',
          'HomeAnimatedText2',
          animatedType ? 'on' : '',
        ]">{{ companyInfo.econKind }}
				</view>
				<view :class="[
          'HomeAnimatedText',
          'HomeAnimatedText3',
          animatedType ? 'on' : '',
        ]">{{ companyInfo.status }}
				</view>
				<view :class="[
          'HomeAnimatedText',
          'HomeAnimatedText4',
          animatedType ? 'on' : '',
        ]">{{ companyInfo.operName }}
				</view>
				<view :class="[
          'HomeAnimatedText',
          'HomeAnimatedText5',
          animatedType ? 'on' : '',
        ]">
					{{ companyInfo.registCapi }}
				</view>
				<view :class="[
          'HomeAnimatedText',
          'HomeAnimatedText6',
          animatedType ? 'on' : '',
        ]">{{ companyInfo.econKind }}
				</view>
				<view :class="[
          'HomeAnimatedText',
          'HomeAnimatedText7',
          animatedType ? 'on' : '',
        ]">{{ companyInfo.startDate }}
				</view>
				<img class="HomePiPeiAnimated1" :src="`${imageBaseUrl}/homeimg1.png`" />
				<img class="HomePiPeiAnimated2" :src="`${imageBaseUrl}/homeimg2.png`" />
				<img class="HomePiPeiAnimated3" :src="`${imageBaseUrl}/homeimg3.png`" />
				<img class="HomePiPeiAnimated4" :src="`${imageBaseUrl}/homeimg4.png`" />
				<view v-if="!animatedType" class="HomePiPeiText" @click="changeAnimated">
					<image :src="`${imageBaseUrl}/pipeiimg1.png`"></image>
				</view>
				<view v-else class="HomePiPeiText HomePiPeiTextActive">
					<view class="HomePiPeiTextActiveFlex">
						<view class="HomePiPeiTextActiveFlexTitle">{{ count }}</view>
						<view class="HomePiPeiTextActiveFlexRate">%</view>
					</view>
					<view class="HomePiPeiTextActiveText">正在通过AI大模型生成</view>
				</view>
			</view>
			<!-- //匹配页信息 -->
			<view :class="['HomeNewContainer', animatedType ? 'on' : '']">
				<view :class="['HomeFlexList', animatedType ? 'on' : '']">
					<view class="HomeFlexLists">
						<view class="HomeFlexListsl">基本信息</view>
						<view class="HomeFlexListsr">
							<view v-if="HomeOneType">
								<image src="/static/images/loading.gif"></image>
							</view>
							<view v-else>
								<image src="/static/images/duigou.png"></image>
							</view>
						</view>
					</view>
					<view class="HomeFlexListx">
						<view class="HomeFlexListxLi">
							<view class="HomeFlexListxLil">企业名称：</view>
							<view class="HomeFlexListxLir">{{ companyInfo.companyName }}</view>
						</view>
						<view class="HomeFlexListxLi">
							<view class="HomeFlexListxLil">社会代码：</view>
							<view class="HomeFlexListxLir">{{ companyInfo.creditCode }}</view>
						</view>
						<view class="HomeFlexListxLi">
							<view class="HomeFlexListxLil">法定代表：</view>
							<view class="HomeFlexListxLir">{{ companyInfo.operName }}</view>
						</view>
						<view class="HomeFlexListxLi">
							<view class="HomeFlexListxLil">人员规模：</view>
							<view class="HomeFlexListxLir">{{ companyInfo.personScope }}</view>
						</view>
						<view class="HomeFlexListxLi">
							<view class="HomeFlexListxLil">参保人数：</view>
							<view class="HomeFlexListxLir">{{ companyInfo.socialStaffNum }}</view>
						</view>
						<view class="HomeFlexListxLi">
							<view class="HomeFlexListxLil">登记机关：</view>
							<view class="HomeFlexListxLir">{{ companyInfo.regInstitute }}</view>
						</view>
						<view class="HomeFlexListxLi">
							<view class="HomeFlexListxLil">成立日期：</view>
							<view class="HomeFlexListxLir">{{ companyInfo.startDate }}</view>
						</view>
						<view class="HomeFlexListxLi">
							<view class="HomeFlexListxLil">注册资本：</view>
							<view class="HomeFlexListxLir">{{ companyInfo.registCapi }}</view>
						</view>
						<view class="HomeFlexListxLi">
							<view class="HomeFlexListxLil">登记机关：</view>
							<view class="HomeFlexListxLir">{{ companyInfo.regInstitute }}</view>
						</view>
						<view class="HomeFlexListxLi">
							<view class="HomeFlexListxLil">核准时间：</view>
							<view class="HomeFlexListxLir">{{ companyInfo.approvedTime }}</view>
						</view>
					</view>
				</view>
				<view :class="['HomeFlexList', 'HomeFlexListNews', animatedType ? 'on' : '']">
					<view class="HomeFlexLists">
						<view class="HomeFlexListsl">经营信息</view>
						<view class="HomeFlexListsr">
							<view v-if="HomeTwoType">
								<image src="/static/images/loading.gif"></image>
							</view>
							<view v-else>
								<image src="/static/images/duigou.png"></image>
							</view>
						</view>
					</view>
					<view class="HomeFlexListx">
						<view class="HomeFlexListxLi">
							<view class="HomeFlexListxLil">资质证书类型：</view>
							<view class="HomeFlexListxLir">{{ fun(companyInfo.certificates,'certificateName')}}</view>
						</view>
						<view class="HomeFlexListxLi">
							<view class="HomeFlexListxLil">发证日期：</view>
							<view class="HomeFlexListxLir">{{ fun(companyInfo.certificates,'startDate') }}</view>
						</view>
						<view class="HomeFlexListxLi">
							<view class="HomeFlexListxLil">截止日期：</view>
							<view class="HomeFlexListxLir">{{ fun(companyInfo.certificates,'endDate') }}</view>
						</view>
						<view class="HomeFlexListxLi">
							<view class="HomeFlexListxLil">许可名称：</view>
							<view class="HomeFlexListxLir">{{ fun(companyInfo.licenses,'licencename') }}</view>
						</view>
						<view class="HomeFlexListxLi">
							<view class="HomeFlexListxLil">发证机关：</view>
							<view class="HomeFlexListxLir">{{ fun(companyInfo.licenses,'department') }}</view>
						</view>
						<view class="HomeFlexListxLi">
							<view class="HomeFlexListxLil">起始日期：</view>
							<view class="HomeFlexListxLir">{{ fun(companyInfo.licenses,'fromdate')  }}</view>
						</view>
						<view class="HomeFlexListxLi">
							<view class="HomeFlexListxLil">截止日期：</view>
							<view class="HomeFlexListxLir">{{ fun(companyInfo.licenses,"todate") }}</view>
						</view>

						<!-- <view class="HomeFlexListxWhite"></view> -->
					</view>
				</view>
				<view :class="['HomeFlexList', 'HomeFlexListNews1', animatedType ? 'on' : '']">
					<view class="HomeFlexLists">
						<view class="HomeFlexListsl">知识产权</view>
						<view class="HomeFlexListsr">
							<view v-if="HomeThreeType">
								<image src="/static/images/loading.gif"></image>
							</view>
							<view v-else>
								<image src="/static/images/duigou.png"></image>
							</view>
						</view>
					</view>
					<view class="HomeFlexListx">
						<view class="HomeFlexListxLi">
							<view class="HomeFlexListxLil">作品著作名称：</view>
							<view class="HomeFlexListxLir">{{ fun(companyInfo.copyRegWorks,"fullname") }}</view>
						</view>
						<view class="HomeFlexListxLi">
							<view class="HomeFlexListxLil">著作类别：</view>
							<view class="HomeFlexListxLir">{{ fun(companyInfo.copyRegWorks,"type") }}</view>
						</view>
						<view class="HomeFlexListxLi">
							<view class="HomeFlexListxLil">著作权人：</view>
							<view class="HomeFlexListxLir">{{ fun(companyInfo.copyRegWorks,"authorNationality") }}
							</view>
						</view>
						<view class="HomeFlexListxLi">
							<view class="HomeFlexListxLil">软著全称：</view>
							<view class="HomeFlexListxLir">{{ fun(companyInfo.copyrights,"fullname") }}</view>
						</view>
						<view class="HomeFlexListxLi">
							<view class="HomeFlexListxLil">著作权人：</view>
							<view class="HomeFlexListxLir">{{ fun(companyInfo.copyrights,"authorNationality") }}</view>
						</view>

						<!-- <view class="HomeFlexListxWhite"></view> -->
					</view>
				</view>
			</view>
			<!-- 政策文件、申报指南、匹配次数 -->
			<view :class="['HomeList', animatedType ? 'on' : '']">
				<view class="HomeListLi" :style="{background: `url(${imageBaseUrl}/homebj1.png) no-repeat center / 202rpx 216rpx`}">
					<view class="HomeListLis">{{ policyCount }}</view>
					<view class="HomeListLix">政策文件</view>
				</view>
				<view class="HomeListLi" :style="{background: `url(${imageBaseUrl}/homebj1.png) no-repeat center / 202rpx 216rpx`}">
					<view class="HomeListLis">{{ guideCount }}</view>
					<view class="HomeListLix">申报指南</view>
				</view>
				<view class="HomeListLi" :style="{background: `url(${imageBaseUrl}/homebj1.png) no-repeat center / 202rpx 216rpx`}">
					<view class="HomeListLis">{{ reportCount }}</view>
					<view class="HomeListLix">匹配次数</view>
				</view>
			</view>
			<uni-popup ref="message" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
			</uni-popup>
			<customTabbar v-if="!animatedType" :currentPages="0" @tabChange="tabChange"/>
			<loginDiaLog :loginType="loginType" @changeLoginTypeEvent="changeLoginTypeEvent"
				@changeLoginSubmitEvent="changeLoginSubmitEvent" />
		</view>
	</view>
</template>

<script>
	import customTabbar from "@/pages/components/custom-tabbar.vue";
	import loginDiaLog from "@/pages/components/loginDiaLog.vue";
	import {
		getPolicyCount,
		guideCount,
		getCompanyByCode,
		getCompanyByName,
		matchPolicyLibrary,
		getReportCount,
		getSearchHistory,
		clearSearchHistory,
	} from "../../api/api.js";
	export default {
		components: {
			customTabbar,
			loginDiaLog,
		},
		computed: {
			imageBaseUrl() {
				return this.$IMAGE_BASE_URL;
			}
		},
		onShow() {
			this.animatedType = false;
			this.HomeOneType = true;
			this.HomeTwoType = true;
			this.HomeThreeType = true;
			this.count = 0;

			// #ifdef MP-WEIXIN
			const token = uni.getStorageSync('token')
			if (token) {
				this.loginType = false
			} else {
				this.loginType = true
			}
			// #endif
			
			// #ifdef H5
			this.$nextTick(() => {
				setTimeout(() => {
					const token = uni.getStorageSync('token');
					if (token) {
						this.loginType = false;
					} else {
						this.loginType = true;
					}
				}, 300);
			})
			// #endif
			clearInterval(this.intervalId);
		},
		data() {
			return {
				HomeOneType: true,
				HomeTwoType: true,
				HomeThreeType: true,
				messageText: '请输入要匹配的企业名称',
				msgType: 'warn',
				token: undefined,
				loginType: false,
				policyCount: 0,
				guideCount: 0,
				reportCount: 0,
				animatedType: false,
				count: 0,
				intervalId: null,
				searchKeyword: "", // 搜索关键词
				searchTimer: null, // 用于防抖的定时器
				searchResults: [], // 初始化为空数组而不是null
				isActive: false, // 控制搜索框样式
				companyInfo: {}, // 企业详情信息
				hasSelectedCompany: false, // 是否已选择企业
				searchHistory: [], // 搜索历史
				showHistory: false, // 是否显示搜索历史
			};
		},
		// #ifdef H5
		watch: {
			searchKeyword(newVal, oldVal) {
				if (newVal) {
					this.onSearchFocus()
				}
			}
		},
		// #endif
		methods: {
			tabChange(){
      console.log("首页")
      },
			// 获取企业资质证书类型
			fun(data, paramType) {
				if (data) {
					if (data.length > 0) {
						return data[0][paramType]
					} else {
						return '-'
					}

				}

			},

			// #ifdef MP-WEIXIN
			handleClick() {
				this.searchResults = [];
				this.isActive = false;
			},
			// #endif

			changeLoginSubmitEvent() {
				this.loginType = false;
			},
			changeLoginTypeEvent() {
				this.loginType = false;
			},
			init() {
				// 获取政策文件数量
				let _this = this;
				getPolicyCount().then((res) => {
					_this.policyCount = res.data;
				});

				// 获取申报指南数量
				guideCount().then((res) => {
					_this.guideCount = res.data;
				});

				// 获取匹配次数
				getReportCount().then((res) => {
					_this.reportCount = res.data;
				});
			},
			changeAnimated() {
				if (!this.hasSelectedCompany) {
					// 显示提示信息
					this.messageText = '请在候选列表中选择企业';
					// this.msgType = 'warn';
					if (this.$refs.message && this.$refs.message.open) {
						this.$refs.message.open();
					}
					return;
				}

				this.animatedType = true;
				setTimeout(() => {
					this.HomeOneType = false
				}, 3000)
				setTimeout(() => {
					this.HomeTwoType = false
				}, 7000)
				setTimeout(() => {
					this.HomeThreeType = false
				}, 11000)
				this.loadProgress();
				matchPolicyLibrary(this.companyInfo.id)
					.then((res) => {
						uni.setStorageSync("matchPolicyLib", res.data);
						// 强制进度完成并立即跳转
						this.count = 100;
						clearInterval(this.intervalId);
						uni.navigateTo({
							url: "/pages/aMatch/index",
							success: () => {
								this.animatedType = false; // 返回首页时重置 animatedType
							},
						});
					})
					.catch((err) => {
						clearInterval(this.intervalId);
						this.animatedType = false;
					});
			},
			// 加载进度
			async loadProgress() {
				this.intervalId = setInterval(() => {
					if (this.count >= 100) {
						this.count = 100;
						clearInterval(this.intervalId);
						return; // 仅停止计时器，不在此处跳转
					}
					this.count++;
				}, 210);
			},
			onUnload() {
				if (this.intervalId) {
					clearInterval(this.intervalId);
				}
			},

			// 搜索输入处理
			onSearchInput() {
				if (this.searchTimer) {
					clearTimeout(this.searchTimer);
				}

				// 当用户手动修改输入时，重置选择状态
				this.hasSelectedCompany = false;

				if (this.searchKeyword === '') {
					this.searchResults = [];
					return;
				}

				this.handleSearch();
			},

			// 处理搜索请求
			handleSearch() {
				// 只要有输入就搜索，包括单个字符
				if (this.searchKeyword === '') {
					this.searchResults = [];
					return;
				}

				// 调用后端搜索API
				getCompanyByName(this.searchKeyword)
					.then((res) => {
						this.searchResults = res.data || [];
					})
					.catch(() => {
						this.searchResults = [];
					});
			},
			selectCompany(company) {
				this.searchKeyword = company.Name;

				console.log('选取的公司信息:',company)
				// 调用企业详情接口
				getCompanyByCode(company).then((res) => {
					if(res.code === 0){
						this.companyInfo = res.data;
					  uni.setStorageSync("companyInfo", this.companyInfo);
					  this.hasSelectedCompany = true; // 标记已选择企业
					  // 添加选择后的提示
					  this.messageText = '请点击"一键匹配"开始匹配';
					  // this.msgType = 'success';
					  if (this.$refs.message && this.$refs.message.open) {
						  this.$refs.message.open();
					  }
					}else{
						// 添加选择后的提示
					  this.messageText = res.msg;
					  // this.msgType = 'success';
					  if (this.$refs.message && this.$refs.message.open) {
						  this.$refs.message.open();
					  }
					}
				});
				this.searchResults = [];
				this.isActive = false;
			},
			activateSearch() {
				this.isActive = true;
			},
			// 搜索框获得焦点
			onSearchFocus() {
				this.isActive = true;
				if (this.searchKeyword === '') {
					this.showHistory = true;
					this.getSearchHistory();
				} else {
					this.showHistory = false;
					this.handleSearch();
				}
			},

			// 搜索框失去焦点
			onSearchBlur() {
				setTimeout(() => {
					this.isActive = false;
					this.showHistory = false;
				}, 200);
			},
			clearSearch() {
				this.searchKeyword = '';
				this.searchResults = [];
				this.isActive = false;
				this.companyInfo = {};
				this.hasSelectedCompany = false;
				this.showHistory = true;
				this.getSearchHistory();
			},
			// 获取搜索历史
			async getSearchHistory() {
				try {
					const res = await getSearchHistory();
					console.log('获取搜索历史:',res)
					if (res.code === 0) {
						this.searchHistory = res.data || [];
					}
				} catch (error) {
					console.error('获取搜索历史失败:', error);
				}
			},
			
			// 清空搜索历史
			async clearSearchHistory() {
				try {
					const res = await clearSearchHistory();
					if (res.code === 0) {
						this.searchHistory = [];
						uni.showToast({
							title: '已清空搜索历史',
							icon: 'success'
						});
					}
				} catch (error) {
					console.error('清空搜索历史失败:', error);
				}
			}
		},

		mounted() {
			this.init();
		},
	};
</script>

<style lang="scss">
	/* #ifdef H5 */
	.uni-popup__warn {
		border-width: 0;
		background-color: rgba(9, 71, 193, 1) !important;

		.uni-popup__warn-text {
			color: #ffffff !important;
		}
	}
	.uni-popup {
		top: 15vh !important;
	}
	/* #endif */
	.page {
		overflow: hidden;
		height: 100vh;
	}

	.content {
		.uni-popup__warn {
			border-width: 0;
			background-color: rgba(9, 71, 193, 1) !important;

			.uni-popup__warn-text {
				color: #ffffff !important;
			}
		}
	}

	.HomeFixedTitle {
		position: fixed;
		width: 100%;
		left: 0;
		top: -1000rpx;
		font-size: 38rpx;
		color: #ffffff;
		font-weight: bold;
		text-align: center;
		z-index: 99;
		transition: all 2s;

		&.on {
			top: 165rpx;
			/* #ifdef H5*/
			top: 100rpx;
			/* #endif*/  
		}
	}

	.HomeBanner {
		padding: 183rpx 24rpx 62rpx;
		transition: all 3s;
		/* #ifdef H5 */
		padding: 123rpx 24rpx 62rpx;
		/* #endif */

		&.on {
			position: relative;
			top: -800rpx;
		}

		image {
			width: 374rpx;
			height: 188rpx;
		}
	}

	.HomeSearch {
		margin: 0 auto;
		width: 90%;
		position: relative;
		box-sizing: border-box;

		&.on {
			position: relative;
			top: -800rpx;
		}

		.HomeSearchInput {
			width: 100%;
			display: flex;
			height: 82rpx;
			align-items: center;
			border: 2rpx solid #009ffc;
			box-sizing: border-box;
			justify-content: flex-start;
			background: #0947c1;
			border-radius: 45rpx;
			padding: 0 28rpx;
			transition: all 0.3s ease;
			position: relative;
			z-index: 10001;

			&.active {
				border-bottom-left-radius: 0;
				border-bottom-right-radius: 0;
			}

			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 17rpx;
				flex-shrink: 0;
			}

			input {
				flex: 1;
				width: 0;
				font-size: 28rpx;
				color: #a1bff3;
				outline: none;
				border: none;
				background: none;
				padding-right: 60rpx; // 为清除按钮预留空间
			}

			.clear-btn {
				position: absolute;
				right: 28rpx;
				top: 50%;
				transform: translateY(-50%);
				width: 36rpx;
				height: 36rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: rgba(161, 191, 243, 0.15);
				border-radius: 50%;
				transition: all 0.2s ease;

				&::before,
				&::after {
					content: '';
					position: absolute;
					width: 20rpx;
					height: 2rpx;
					background-color: #a1bff3;
					transform-origin: center;
					transition: all 0.2s ease;
				}

				&::before {
					transform: rotate(45deg);
				}

				&::after {
					transform: rotate(-45deg);
				}

				&:active {
					background: rgba(161, 191, 243, 0.3);
					transform: translateY(-50%) scale(0.9);

					&::before,
					&::after {
						background-color: #ffffff;
					}
				}
			}
		}
	}

	.HomePiPei {
		height: 707rpx;
		padding: 43rpx 24rpx 0;
		box-sizing: border-box;
		position: relative;
		transition: all 2s;

		&.on {
			margin-top: -360rpx;
		}

		.HomePiPeiAnimated1 {
			position: absolute;
			top: -260rpx;
			left: 0;
			width: 750rpx;
			height: 1206rpx;
		}

		.HomePiPeiAnimated2 {
			position: absolute;
			left: 50%;
			margin-left: -250rpx;
			top: 118rpx;
			width: 501rpx;
			height: 501rpx;
		}

		.HomePiPeiAnimated3 {
			position: absolute;
			left: 50%;
			margin-left: -222rpx;
			top: 145rpx;
			width: 445rpx;
			height: 445rpx;
			animation: rotate360 12s linear infinite;
		}

		.HomePiPeiAnimated4 {
			position: absolute;
			left: 50%;
			margin-left: -213rpx;
			top: 150rpx;
			width: 426rpx;
			height: 433rpx;
			animation: rotate360 7s linear infinite;
		}

		.HomePiPeiText {
			position: absolute;
			width: 100%;
			left: 0;
			top: 323rpx;
			font-size: 48rpx;
			color: #ffffff;
			text-align: center;

			image {
				display: inline-block;
				width: 279rpx;
				height: 83rpx;
			}
			img {
				display: inline-block;
				width: 279rpx;
				height: 83rpx;
			}

			&.HomePiPeiTextActive {
				top: 293rpx;

				.HomePiPeiTextActiveFlex {
					display: flex;
					font-size: 40rpx;
					color: #ffffff;
					justify-content: center;

					.HomePiPeiTextActiveFlexTitle {
						font-size: 82rpx;
						color: #ffffff;
						font-weight: bold;
					}

					.HomePiPeiTextActiveFlexRate {
						padding: 48rpx 0 0;
					}
				}

				.HomePiPeiTextActiveText {
					font-size: 28rpx;
					color: #ffffff;
					text-align: center;
				}
			}
		}
	}

	.placeholderStyle {
		font-size: 28rpx;
		color: #a1bff3;
	}

	@keyframes rotate360 {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.HomeList {
		display: flex;
		position: relative;
		justify-content: center;

		&.on {
			bottom: -1000rpx;
		}

		.HomeListLi {
			width: 202rpx;
			height: 216rpx;
			margin: 0 13rpx;
			text-align: center;
			padding: 30rpx 0 0;
			box-sizing: border-box;

			.HomeListLis {
				font-size: 46rpx;
				color: #ffffff;
				font-weight: bold;
			}

			.HomeListLix {
				font-size: 26rpx;
				color: #ffffff;
			}
		}
	}

	.HomeFlexList {
		position: absolute;
		left: 50%;
		margin-left: -351rpx;
		top: -1000rpx;
		width: 702rpx;
		padding: 0 40rpx;
		border-radius: 20rpx;
		background: #ffffff;
		box-sizing: border-box;

		&.on {
			animation: fadeUp 1s ease 0.6s forwards;

			.HomeFlexListx {
				animation: fadeOutTwo 0.3s ease 4.8s forwards;

				.HomeFlexListxLi {
					animation: fadeIn 1s ease forwards;
					opacity: 0;

					&:nth-child(1) {
						animation-delay: 2.2s;
					}

					&:nth-child(2) {
						animation-delay: 2.4s;
					}

					&:nth-child(3) {
						animation-delay: 2.6s;
					}

					&:nth-child(4) {
						animation-delay: 2.8s;
					}

					&:nth-child(5) {
						animation-delay: 3s;
					}

					&:nth-child(6) {
						animation-delay: 3.2s;
					}

					&:nth-child(7) {
						animation-delay: 3.4s;
					}

					&:nth-child(8) {
						animation-delay: 3.6s;
					}

					&:nth-child(9) {
						animation-delay: 3.8s;
					}

					&:nth-child(10) {
						animation-delay: 4s;
					}

				}
			}
		}

		&.HomeFlexListNews {
			.HomeFlexLists {
				.HomeFlexListsl {
					background: url("/static/images/gongshang.png") no-repeat left center / 34rpx 38rpx;
				}
			}

			&.on {
				animation: fadeUpTwo 1s ease 4.4s forwards;

				.HomeFlexListx {
					animation: fadeOutTwo 0.3s ease 9.4s forwards;

					.HomeFlexListxLi {
						animation: fadeIn 1s ease forwards;
						opacity: 0;

						&:nth-child(1) {
							animation-delay: 6.8s;
						}

						&:nth-child(2) {
							animation-delay: 7s;
						}

						&:nth-child(3) {
							animation-delay: 7.2s;
						}

						&:nth-child(4) {
							animation-delay: 7.4s;
						}

						&:nth-child(5) {
							animation-delay: 7.6s;
						}

						&:nth-child(6) {
							animation-delay: 7.8s;
						}

						&:nth-child(7) {
							animation-delay: 8s;
						}


					}
				}
			}
		}

		&.HomeFlexListNews1 {
			.HomeFlexLists {
				.HomeFlexListsl {
					background: url("/static/images/xinxi.png") no-repeat left center / 32rpx 32rpx;
				}
			}

			&.on {
				animation: fadeUpThree 1s ease 9.4s forwards;

				.HomeFlexListx {
					animation: fadeOutTwo 0.3s ease 13s forwards;

					.HomeFlexListxLi {
						animation: fadeIn 1s ease forwards;
						opacity: 0;

						&:nth-child(1) {
							animation-delay: 11s;
						}

						&:nth-child(2) {
							animation-delay: 11.2s;
						}

						&:nth-child(3) {
							animation-delay: 11.4s;
						}

						&:nth-child(4) {
							animation-delay: 11.6s;
						}

						&:nth-child(5) {
							animation-delay: 11.8s;
						}
					}
				}
			}
		}

		.HomeFlexLists {
			display: flex;
			height: 110rpx;
			align-items: center;
			justify-content: space-between;

			.HomeFlexListsl {
				font-size: 32rpx;
				color: #041328;
				padding-left: 53rpx;
				background: url("/static/images/xinxi.png") no-repeat left center / 32rpx 32rpx;
			}

			.HomeFlexListsr {
				font-size: 28rpx;
				color: #041328;

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.HomeFlexListx {
			padding: 0 0 20rpx;
			position: relative;

			.HomeFlexListxLi {
				display: flex;
				line-height: 50rpx;
				justify-content: flex-start;
				align-items: flex-start;

				.HomeFlexListxLil {
					font-size: 28rpx;
					color: #8698ae;
					width: 220rpx;
					flex: none;
					padding-right: 20rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.HomeFlexListxLir {
					font-size: 28rpx;
					color: #8698ae;
					flex: 1;
					word-break: break-all;
					text-align: left;
					min-width: 0;
				}
			}

			.HomeFlexListxWhite {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 170rpx;
				background: rgba(255, 255, 255, 0.7);
			}
		}
	}

	@keyframes fadeOut {
		from {
			opacity: 1;
		}

		to {
			opacity: 0;
		}
	}

	.HomeAnimatedText {
		position: fixed;
		z-index: 99;

		&.HomeAnimatedText1 {
			left: -1000rpx;
			top: -1000rpx;
			font-size: 38rpx;
			color: #ffffff;
			transition: all 2.5s;

			&.on {
				left: 62rpx;
				top: 328rpx;
				animation: fadeOut 1.5s 2.5s forwards;
			}
		}

		&.HomeAnimatedText2 {
			left: -1000rpx;
			top: -1000rpx;
			font-size: 32rpx;
			color: #ffffff;
			opacity: 0.8;
			transition: all 3.25s;

			&.on {
				left: 311rpx;
				top: 308rpx;
				animation: fadeOut 1.5s 3.25s forwards;
			}
		}

		&.HomeAnimatedText3 {
			left: -1000rpx;
			top: -1000rpx;
			font-size: 28rpx;
			color: #ffffff;
			opacity: 0.2;
			transition: all 4s;

			&.on {
				left: 75rpx;
				top: 495rpx;
				animation: fadeOut 1.5s 4s forwards;
			}
		}

		&.HomeAnimatedText4 {
			left: auto;
			right: -1000rpx;
			top: -1000rpx;
			font-size: 42rpx;
			color: #ffffff;
			transition: all 4.75s;

			&.on {
				right: 132rpx;
				top: 422rpx;
				animation: fadeOut 1.5s 4.75s forwards;
			}
		}

		&.HomeAnimatedText5 {
			left: auto;
			right: -1000rpx;
			top: -1000rpx;
			font-size: 28rpx;
			color: #ffffff;
			opacity: 0.4;
			transition: all 5.5s;

			&.on {
				right: 60rpx;
				top: 532rpx;
				animation: fadeOut 1.5s 5.5s forwards;
			}
		}

		&.HomeAnimatedText6 {
			left: -1000rpx;
			top: -1000rpx;
			font-size: 30rpx;
			color: #ffffff;
			opacity: 0.8;
			transition: all 6.25s;

			&.on {
				left: 40rpx;
				top: 693rpx;
				animation: fadeOut 1.5s 6.25s forwards;
			}
		}

		&.HomeAnimatedText7 {
			right: -1000rpx;
			top: -1000rpx;
			font-size: 32rpx;
			color: #ffffff;
			transition: all 7s;

			&.on {
				right: 60rpx;
				top: 708rpx;
				animation: fadeOut 1.5s 7s forwards;
			}
		}
	}

	.searchResults {
		position: absolute;
		background-color: rgba(9, 71, 193, 0.98);
		border: 2rpx solid #009ffc;
		border-top: none;
		width: 100%;
		max-height: 400rpx;
		overflow-y: auto;
		z-index: 10000;
		top: 82rpx;
		left: 0;
		right: 0;
		box-sizing: border-box;
		box-shadow: 0 8rpx 16rpx rgba(0, 159, 252, 0.2);
		border-bottom-left-radius: 45rpx;
		border-bottom-right-radius: 45rpx;
		backdrop-filter: blur(10px);
		transform-origin: top;
		animation: dropDown 0.3s ease-out;
		.searchHistoryHeader {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 28rpx;
			border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
			
			text {
				font-size: 28rpx;
				color: rgba(255, 255, 255, 0.6);
			}
			
			.clearHistory {
				color: #009ffc;
				font-size: 26rpx;
			}
		}
		// 自定义滚动条样式
		&::-webkit-scrollbar {
			width: 6rpx;
			background-color: transparent;
		}

		&::-webkit-scrollbar-thumb {
			background-color: rgba(0, 159, 252, 0.3);
			border-radius: 3rpx;

			&:hover {
				background-color: rgba(0, 159, 252, 0.5);
			}
		}

		// 空结果提示
		&.empty {
			padding: 40rpx 0;
			text-align: center;
			color: rgba(255, 255, 255, 0.6);
			font-size: 28rpx;
		}

		view {
			padding: 24rpx 28rpx;
			font-size: 28rpx;
			color: rgba(255, 255, 255, 0.9);
			cursor: pointer;
			transition: all 0.3s ease;
			position: relative;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;

			&:not(:last-child) {
				border-bottom: 1rpx solid rgba(255, 255, 255, 0.08);
			}

			&:hover {
				background-color: rgba(0, 159, 252, 0.15);
				color: #fff;
				padding-left: 40rpx;

				&::before {
					content: "";
					position: absolute;
					left: 20rpx;
					top: 50%;
					width: 6rpx;
					height: 6rpx;
					background: #009ffc;
					border-radius: 50%;
					transform: translateY(-50%);
					box-shadow: 0 0 8rpx rgba(0, 159, 252, 0.6);
				}
			}
		}
	}

	.uni-popup.top,
	.uni-popup.left,
	.uni-popup.right {
		top: 15vh !important;
	}

	@keyframes dropDown {
		from {
			opacity: 0;
			transform: scaleY(0);
		}

		to {
			opacity: 1;
			transform: scaleY(1);
		}
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(20px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes fadeOutTwo {
		from {
			opacity: 1;
		}

		to {
			opacity: 0;
			height: 0;
			padding: 0;
		}
	}

	.HomeNewContainer {
		position: fixed;
		left: 0;
		top: -100vh;
		width: 100%;
		overflow: hidden;
		height: 100vh;

		&.on {
			top: 860rpx;
		}
	}

	@keyframes fadeUp {
		from {
			top: -1000rpx;
		}

		to {
			top: 0;
		}
	}

	@keyframes fadeUpTwo {
		from {
			top: -1000rpx;
		}

		to {
			top: 140rpx;
		}
	}

	@keyframes fadeUpThree {
		from {
			top: -1000rpx;
		}

		to {
			top: 280rpx;
		}
	}

	/* 自定义消息弹窗样式 */
	.uni-popup-message {
		padding: 0 !important;
		border-radius: 20rpx !important;
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.08) !important;
		transform-origin: top;
		animation: messageFloat 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) !important;
		max-width: 60% !important;
		margin: 0 auto !important;
		overflow: hidden !important;
		opacity: 0.97 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;

		.uni-popup-message-text {
			font-size: 28rpx !important;
			color: #a13c1d9c !important;
			font-weight: 500 !important;
			letter-spacing: 0.5rpx !important;
			line-height: 1.5 !important;
			text-align: center !important;
			white-space: nowrap !important;
			overflow: hidden !important;
			text-overflow: ellipsis !important;
			margin: 0 0 0 -3rpx !important;
			width: 100% !important;
			display: flex !important;
			align-items: center !important;
			justify-content: center !important;
		}
	}

	/* #ifdef H5 */
	.uni-popup-message {
		background-color: rgba(9, 71, 193, 1) !important;
		border-width: 0 !important;
		padding: 0 !important;
		max-width: 60% !important;
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.08) !important;

		.uni-popup-message-text {
			color: #ffffff !important;
			font-size: 28rpx !important;
			font-weight: 500 !important;
			letter-spacing: 0.5rpx !important;
			line-height: 1.5 !important;
			text-align: center !important;
			white-space: nowrap !important;
			overflow: hidden !important;
			text-overflow: ellipsis !important;
			margin: 0 0 0 -3rpx !important;
			width: 100% !important;
			display: flex !important;
			align-items: center !important;
			justify-content: center !important;
		}
	}

	.uni-popup__warn {
		border-width: 0 !important;
		background-color: rgba(9, 71, 193, 1) !important;
	}

	.uni-popup__warn-text {
		color: #ffffff !important;
	}
	/* #endif */

	@keyframes messageFloat {
		0% {
			opacity: 0;
			transform: translateY(-30rpx) scale(0.95);
		}

		60% {
			transform: translateY(5rpx) scale(1.02);
		}

		100% {
			opacity: 1;
			transform: translateY(0) scale(1);
		}
	}
</style>